<template>
  <div class="kepu">
    <div class="kepu-top">
      <van-popup
        v-model:show="showBottom"
        round
        position="bottom"
        :style="{ height: '30%', background: 'rgb(215, 220, 220' }"
      >
        <div class="fx">
          <span>— 分享至 —</span>
        </div>
        <div class="tx">
          <div class="wx">
            <div class="wxt">
              <img src="../../assets/guahao_img/微信.png" alt="" @click="shareToWeChat()" />
            </div>
            <div class="wxz">微信好友</div>
          </div>
          <div class="pyq">
            <div class="pyqt">
              <img src="../../assets/guahao_img/微博.png" alt="" @click="shareToMicroblog()" />
            </div>
            <div class="pyqz">微博</div>
          </div>
          <div class="QQ">
            <div class="QQT">
              <img src="../../assets/guahao_img/QQ空间.png" alt="" @click="shareToQQRom()" />
            </div>
            <div class="QQZ">QQ空间</div>
          </div>
        </div>
        <button>取消</button>
      </van-popup>
      <span>
        <van-icon name="arrow-left" @click="$router.push('/home')" />
        <span style="margin-left: 25%">皮肤性病_妙手医生</span>
        <span><van-icon name="replay" style="float: right" @click="showPopup" /></span>
      </span>
    </div>

    <div class="kepu-main">
      <span
        ><span class="kepu-main-zi">圆心.</span><span class="kepu-main-zi1">妙手医生</span></span
      >
    </div>
    <div class="kepu-input">
      <span class="kepu-input-zi">
        <van-icon name="search" style="margin-left: 40px; font-size: 50px; line-height: 70px" />
        <input
          type="text"
          placeholder="搜一搜解决健康问题"
          @click="$router.push('/kepulist')"
        /><button>搜索</button>
      </span>
    </div>

    <div class="tab-kp">
      <van-tabs v-model:active="active" @click-tab="hanldeClick" style="background: #f5f5f5">
        <van-tab v-for="(index, item) in tabson" :title="index" :key="item"> </van-tab>
        <div
          class="indexs"
          v-for="(item, index) in tablist"
          key="index"
          @click="$router.push('/kepulist2?id=' + item.id)"
        >
          <div class="itemmsg">
            <div class="mst">
              <div class="top">
                <div class="title">
                  {{ item.title }}
                </div>

                <div class="chi">
                  {{ item.chi }}
                </div>
                <div class="zp">
                  <img
                    src="https://www.bing.com/th/id/OGC.081dc16416c898ad2ee44b4214424713?pid=1.7&rurl=https%3a%2f%2fwimg.588ku.com%2fgif%2f21%2f05%2f12%2f0dd2455fb8fe74b38528036aa0a6fba1.gif&ehk=7KTl5qD3PBQCPtbgCzbnzmYubTPnEqMGFiefsX6kmkA%3d"
                    alt=""
                  />
                </div>
              </div>

              <div class="name-sj">
                <div class="tx">
                  <img
                    src="https://tse3-mm.cn.bing.net/th/id/OIP-C.UZJ39CfXAPCBm63euHZSJAAAAA?w=185&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                    alt=""
                  />
                </div>
                <div class="name">
                  {{ item.name }}
                </div>
                <div class="vip">
                  <img src="../../assets//guahao_img/vip.png" alt="" data-src="xxx" />
                </div>
                <div class="class">
                  {{ item.class }}
                </div>
                <div class="position">
                  {{ item.position }}
                </div>
                <div class="browse">
                  <van-icon name="eye-o" />
                  {{ item.browse }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  props: ['sysInfo'], //父组件传过来的文章数据
  data() {
    return {
      shareUrl: location.href,
    }
  },
  methods: {
    /**
     * 分享到微博
     */
    shareToMicroblog() {
      //跳转地址
      window.open(
        'https://service.weibo.com/share/share.php?url=' +
          encodeURIComponent(this.shareUrl) +
          '&title=' +
          this.sysInfo
      )
    },
    /**
     * 分享到qq空间
     */
    shareToQQRom() {
      //跳转地址
      window.open(
        'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' +
          encodeURIComponent(this.shareUrl) +
          '&title=' +
          this.sysInfo +
          '&summary=' +
          this.sysInfo
      )
    },
    /**
     * 分享到微信：需要单独画页面
     */
    shareToWeChat() {
      window.open(
        'https://wei.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' +
          encodeURIComponent(this.shareUrl) +
          '&title=' +
          this.sysInfo +
          '&summary=' +
          this.sysInfo
      )
    },
  },
}
</script>
<script setup lang="ts">
import axios from '../../utils/index'

import { ref } from 'vue'
const list = ref([])
const tabindex = ref(1)
const tablist = ref([])
// 获取全部数据
const getlist = async () => {
  let res = await axios.get('/api/science')
  list.value = res.data.data
  tablist.value = list.value.filter((item) => item.tabid == tabindex.value)
  console.log(tablist.value)
}
getlist()
const hanldeClick = (e) => {
  // console.log(e.name);
  tabindex.value = e.name + 1
  console.log(tabindex.value)
  console.log(list.value.filter((item) => item.tabid == tabindex.value))
  tablist.value = list.value.filter((item) => item.tabid == tabindex.value)
}
// tab切换数据
const tabson = ref([
  '皮肤病性病',
  '肿瘤',
  '心里健康',
  '两性科普',
  '过敏',
  '母婴',
  '老年保健',
  '风湿',
  '高血压',
  '糖尿病',
  '痛风',
  '脂肪肝',
  '中医知识',
  '急救知识',
])
const showBottom = ref(false)
const showPopup = () => {
  showBottom.value = true
}
</script>

<style lang="scss" scoped>
.kepu {
  width: 100%;
  height: 100%;
  background: #ffff;

  .kepu-top {
    font-size: 35px;
    height: 50px;
    width: 100%;
    font-weight: 600;
    position: fixed;
    top: 0;
    z-index: 999;
     background: #fff;

    .fx {
      width: 100%;
      height: 50px;
      margin-top: 20px;
      span {
        margin-left: 39%;
        font-size: 30px;
        font-weight: normal;
      }
    }
    .tx {
      width: 100%;
      height: 200px;
      margin-top: 20px;
    }
    .wx {
      width: 200px;
      height: 200px;
      float: left;
      margin-left: 40px;
      .wxt {
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        margin: auto;
        margin-top: 50px;
        img {
          width: 80px;
          height: 80px;
          margin-top: 10px;
          margin-left: 10px;
        }
      }
      .wxz {
        width: 200px;
        height: 50px;
        text-align: center;
        font-size: 25px;
        line-height: 50px;
        font-weight: normal;
        color: #666666;
      }
    }
    .pyq {
      width: 200px;
      height: 200px;
      float: left;
      margin-left: 40px;
      .pyqt {
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        margin: auto;
        margin-top: 50px;
        img {
          width: 80px;
          height: 80px;
          margin-left: 10px;
          margin-top: 10px;
        }
      }
      .pyqz {
        width: 200px;
        height: 50px;
        text-align: center;
        font-size: 25px;
        line-height: 50px;
        font-weight: normal;
        color: #666666;
      }
    }
    .QQ {
      width: 200px;
      height: 200px;
      float: left;
      margin-left: 40px;
      .QQT {
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        margin: auto;
        margin-top: 50px;
        img {
          width: 80px;
          height: 80px;
          margin-left: 10px;
          margin-top: 10px;
        }
      }
      .QQZ {
        width: 200px;
        height: 50px;
        text-align: center;
        font-size: 25px;
        line-height: 50px;
        font-weight: normal;
        color: #666666;
      }
    }
    button {
      width: 95%;
      height: 80px;
      background: rgb(247, 247, 247);
      margin-left: 2.5%;
      border-radius: 40px;
      margin-top: 20px;
      color: #000;
      font-size: 30px;
      font-weight: normal;
      border: none;
    }
  }
  .kepu-main {
    height: 50px;
    width: 100%;
    margin-top: 40px;
    background: #fff;
    .kepu-main-zi {
      margin-left: 35px;
      font-size: 40px;
      font-weight: 700;
    }
    .kepu-main-zi1 {
      font-size: 40px;
      color: #1e6fff;
      font-weight: 700;
    }
  }
  .kepu-input {
    width: 90%;
    height: 70px;
    margin-top: 20px;
    border-radius: 35px;
    border: 2px solid #000;
    background: #ffffff;
    margin-left: 5%;
    .kepu-input-zi {
      width: 90%;
      height: 100px;
 
      input {
        width: 80%;
        height: 65px;
        margin-left: 5%;
        border: none;
        
      }
      button {
        width: 10%;
        height: 55px;
        border-radius: 15px;
        border: 1px solid #eee;
        background: #fff;
        color: #000000;
        margin-left: -11%;
        border: none;
      }
    }
  }
  .tab-kp {
    width: 100%;
    height: 60px;
    margin-top: 30px;
  }
  .indexs {
    margin-top: 50px;
  }
  .itemmsg {
    width: 95%;
    height: 250px;
    background: #fff;
    margin-left: 2.5%;
    border-radius: 15px;
  }
  .mst {
    display: flex;
    flex-direction: column;
  }
  .top {
    width: 100%;
    height: 200px;
    // background: salmon;
    .title {
      width: 500px;
      height: 60px;
      line-height: 60px;
      // background: gold;
      margin-left: 20px;
      font-size: 30px;
      float: left;
    }
    .chi {
      width: 500px;
      height: 130px;
      font-style: 25px;
      word-wrap: break - word;
      overflow-wrap: break - word;
      // background: hotpink;
      line-height: 35px;
      margin-left: 20px;
      float: left;
      color: #222222;
    }
    .zp {
      width: 180px;
      height: 200px;
      float: right;
      margin-top: -60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .name-sj {
    width: 100%;
    height: 50px;
    float: left;
    .name {
      width: 70px;
      height: 50px;
      margin-left: 20px;
      float: left;
      line-height: 50px;
      font-size: 25px;
      color: #666666;
    }
    .class {
      width: 130px;
      height: 50px;
      float: left;
      margin-left: 20px;
      line-height: 50px;
      color: #666666;
      font-size: 25px;
    }
    .position {
      width: 130px;
      height: 50px;
      float: left;
      margin-left: 20px;
      line-height: 50px;
      color: #666666;
      font-size: 25px;
    }
    .browse {
      width: 130px;
      height: 50px;
      float: left;
      margin-left: 70px;
      line-height: 50px;
      color: #666666;
      font-size: 25px;
    }
    .vip {
      width: 30px;
      height: 30px;
      margin-left: 20px;
      margin-top: 10px;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tx {
      width: 50px;
      height: 50px;
      float: left;
      margin-left: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>